<template>
	<!-- 条形统计图 -->
	<div class id="container"></div>
</template>

<script>
import { Bar } from '@antv/g2plot'

export default {
	name: 'columnPlot',
	props: {
		chartObj: {
			type: Object,
			required: true,
		},
		chartData: {
			type: Array
		}
	},
	data () {
		return {
			ColumnPlot: null,
			resData: []
		}
	},
	components: {},
	computed: {},
	mounted () {
		this.getColumnPlotObj()
		this.getBarChart()
		console.log( "子组件mountd" );
	},
	watch: {},
	methods: {
		getColumnPlotObj ( data ) {
			// todo 条形统计图
			this.ColumnPlot = new Bar(
				document.getElementById( this.chartObj.chartId ),
				{
					title: {
						visible: true,
						text: this.chartObj.titleText,
					},
					description: {
						visible: true,
						text: this.chartObj.desText,
					},
					forceFit: true,
					padding: 'auto',
					renderer: 'canvas',
					// data: this.chartData,
					xField: 'size',
					yField: 'name',
					meta: {
						name: { alias: this.chartObj.field.xField },
						size: { alias: this.chartObj.field.yField },
					},
					barStyle: { lineWidth: '40px' },
					label: {
						visible: true,
						position: 'right',
						adjustColor: true,
					},
					columnSize: 40,
					tooltip: {
						visible: false,
					},
					columnStyle: { fill: '#1C8BE4' },
					xAxis: {
						title: { visible: false },
						// formatter: v => Math.round(v / 10000) + '万'
					},
					yAxis: { title: { visible: false } },
				},
			)
			// this.ColumnPlot.render()
		},
		getBarChart () {
			this.ColumnPlot.data = this.resData;
			this.ColumnPlot.render()
		},
		changeData ( data ) {
			this.ColumnPlot.updateConfig( {
				title: {
					visible: true,
					text: this.chartObj.titleText,
				},
				description: {
					visible: true,
					text: this.chartObj.desText,
				},
				forceFit: true,
				padding: 'auto',
				renderer: 'canvas',
				data,
				xField: 'size',
				yField: 'name',
				meta: {
					name: { alias: this.chartObj.field.xField },
					size: { alias: this.chartObj.field.yField },
				},
				barStyle: { lineWidth: '40px' },
				label: {
					visible: true,
					position: 'right',
					adjustColor: true,
				},
				columnSize: 40,
				tooltip: {
					visible: false,
				},
				columnStyle: { fill: '#1C8BE4' },
				xAxis: {
					title: { visible: false },
					// formatter: v => Math.round(v / 10000) + '万'
				},
				yAxis: { title: { visible: false } },
			}

			)
			this.ColumnPlot.render()

		}
	},
}
</script>

<style lang="less">
#-axis-title {
	display: none;
}
</style>
